<template>
  <div>
    <div v-if="type === 'nopopup'">
      <van-cell-group>
        <van-cell
          :title="label"
          :value="data"
          @click="showRadio = !showRadio"
        />

        <van-row>
          <van-col span="8" />
          <van-col span="16">
            <van-radio-group
              v-show="showRadio2"
              v-model="value2"
              direction="horizontal"
            >
              <van-radio v-for="l in options" :key="l.id" :name="l.value">
                {{ l.text }}
              </van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </van-cell-group>
    </div>

    <div v-else>
      <van-field
        :value="value"
        :name="name"
        readonly
        clickable
        autosize
        :label="label"
        :placeholder="placeholder"
        right-icon="arrow-down"
        @click="showPopup = true"
      >
        <template #input>
          <div>
            {{ data }}
          </div>
        </template>
      </van-field>

      <van-popup v-model="showPopup" round :position="position">
        <van-picker
          show-toolbar
          :columns="options2"
          :default-index="defaultIndex"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        >
          <!-- <template #columns-top>
            <div>
              columns-top
            </div>
          </template> -->
        </van-picker>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FieldPopup',
  props: {
    type: { type: String, default: 'popup' },
    show: { type: Boolean, default: false },
    value: undefined,
    name: { type: String, default: '' },
    label: { type: String, default: '' },
    options: { type: Array, default: () => [] },
    placeholder: { type: String, default: '' },
    position: { type: String, default: 'bottom' }
  },

  data() {
    return {
      showRadio: false,
      showPopup: false,
      activeNames: []
    }
  },

  computed: {
    options2() {
      return [{ value: null, text: '(不选择)' }, ...this.options]
    },

    showRadio2: function() {
      return this.show || this.showRadio
    },

    value2: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    data: function() {
      return this.options
        .filter(item => this.value === item.value)
        .map(item => item.text)
        .join('')
    },

    defaultIndex: function() {
      // console.log(' defaultIndex, ', this.value)
      const index = this.options2.findIndex(item => item.value === this.value)
      return index >= 0 ? index : 0
    }
  },

  watch: {
    //
    value: {
      handler(newVal, oldVal) {
        // this.change()
        console.log('change, Picker,', newVal, oldVal)
        this.$emit('change', newVal)
      },
      deep: true,
      immediate: true
    }
  },

  async created() {},

  methods: {
    onConfirm(value) {
      console.log('onConfirm', value)
      this.$emit('input', value.value || null)
      this.showPopup = false
    }
  }
}
</script>

<style type="text/css"></style>
